<template>
	<div class="goodcourse">
		<h4>热门专题</h4>
		<ul>
			<li v-for="(v,i) in arr" :key="i">
				<img :src="v.img"/>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				arr:[
					{"img":"img/goodcourse1.png"},
					{"img":"img/goodcourse2.png"},
					{"img":"img/goodcourse3.png"},
					{"img":"img/goodcourse4.png"}
				]
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.goodcourse{
		background-color: #FFFFFF;
		margin-top: 0.05rem;
		h4{
			font-size: 0.18rem;
			padding-top: 0.3rem;
			padding-left: 0.15rem;
		}
		ul{
			width: calc(100% - 0.3rem);
			padding: 0.15rem 0.15rem 0.25rem 0;
			height: 0.85rem;
			display: flex;
			justify-content: flex-start;
			flex-wrap: no-wrap;
			white-space:nowrap;
			overflow:auto;
			li{
				margin-left: 0.15rem;
			}
			
		}
	}
</style>
